import React, { useEffect, useRef, useState } from 'react';
import styles from './index.module.scss';
import CardStage from './components/CardStage';
import { observer, inject } from "mobx-react";
import { useLocation } from 'react-router';

const MainStage = (props) => {
  const [routePath, setRoutePath] = useState<any>(null);
  const location = useLocation();
  useEffect(() => {
    const pathname = location.pathname;
    let paths = pathname.split('/');
    paths = paths.slice(2);
    if (paths.length >= 2) {
      setRoutePath(paths);
    }
  }, [location]);
  return (
    <div className={styles.stageWrap}>
      {routePath && <CardStage routePath={routePath}></CardStage>}
    </div>
  );
};

export default MainStage;
